import classNames from 'classnames'
import contentStyle from '../index.module.scss'
import Drag from './dragabelLayout'
import styles from './index.module.scss'
import HeadPosition from './headPosition'
import ColumnWidth from './columnWidth'
import Title from './module/title'
import Spacing from './module/spacing'
import { updateCustomization } from '@/service'
import { isProd } from '@/app/utils'

const requests = new Map()
let timer = null
export async function batchUpdateCustomization(data) {
  requests.set('id', data.id)
  data.updates.forEach((item) => {
    requests.set(item.path, item)
  })
  return new Promise<any>((resolve) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(async () => {
      const obj = {
        id: requests.get('id'),
        updates: []
      }

      requests.forEach((value, key, map) => {
        if (key !== 'id') {
          obj.updates.push(value)
        }
      })

      requests.clear()
      const res = await updateCustomization({
        ...obj,
      })
      resolve(res)
      timer = null
    }, 1300)
  })
}

function Index() {
  return (
    <div className={classNames(styles.layout, styles.module, contentStyle.card)}>
      <h1 className={contentStyle.title} style={{ marginBottom: '20px' }}>模块布局</h1>
      <div style={{ maxWidth: '500px' }}>
        {
          !isProd ? <HeadPosition /> : null
        }

        <Drag></Drag>
        <ColumnWidth />
        <Title></Title>
        <Spacing></Spacing>
      </div>

    </div>
  )
}

export default Index
